<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="commons/css::css">head</th:block>
</head>

<body class="flat-blue">
<i style="display: none;" id="_manager_url" url="/slService/manager"></i>
<div class="app-container">
    <div class="row content-container">
        <th:block th:include="commons/nav_head::nav">head</th:block>
        <th:block th:include="commons/side::side">side</th:block>
        <!-- Main Content -->
        <div class="container-fluid">
            <div class="side-body">
                <div class="row">
                    <div class="col-xs-12">
                        <!--面包屑导航-->
                        <!--<ol class="breadcrumb">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">2013</a></li>
                            <li class="active">十一月</li>
                        </ol>-->
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <label th:text="${service.id}?'修改':'添加'"></label>服务
                            </div>
                            <div class="panel-body form-group">
                                <form class="form-horizontal" role="form" id="actionForm" name="actionForm" method="post" th:action="@{/slService/saveSlService}">
                                    <div class="form-group">
                                        <label for="title" class="col-sm-2 control-label">标题</label>
                                        <div class="col-sm-4">
                                            <input type="hidden" id="id" name="id" th:value="${service.id}">
                                            <input type="text" class="form-control" id="title" name="title" th:value="${service.title}" placeholder="请输入标题" required>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="imgUrl" class="col-sm-2 control-label">图片</label>
                                        <div class="col-sm-4">
                                            <input type="hidden" id="imgUrl" name="imgUrl" th:value="${service.imgUrl}">
                                            <input type="file" style="display: none;" id="imgUrlFile" name="imgUrlFile">
                                            <img th:src="${service.imgUrl}?${service.imgUrl}:@{/public/images/plus23.png}" onclick="$('#imgUrlFile').click();" id="preview" style="height: 150px; width: 150px;">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="address" class="col-sm-2 control-label">地点</label>
                                        <div class="col-sm-4">
                                            <input type="text" class="form-control" id="address" name="address" th:value="${service}?${service.address}" placeholder="请输入地点" required>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="activityStartTime" class="col-sm-2 control-label">开始时间</label>
                                        <div class="col-sm-4">
                                            <input size="16" class="form-control" id="activityStartTime" name="activityStartTime" onclick="WdatePicker({skin:'twoer',dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d'})" type="text" th:value="${service.activityStartTime}?${#dates.format(service.activityStartTime, 'yyyy-MM-dd HH:mm')}" readonly>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="activityEndTime" class="col-sm-2 control-label">结束时间</label>
                                        <div class="col-sm-4">
                                            <input size="16" class="form-control" id="activityEndTime" name="activityEndTime" type="text" onclick="WdatePicker({skin:'twoer',dateFmt:'yyyy-MM-dd HH:mm',minDate:'#F{$dp.$D(\'activityStartTime\')}'})" th:value="${service.activityEndTime}?${#dates.format(service.activityEndTime, 'yyyy-MM-dd HH:mm')}" readonly>
                                        </div>
                                    </div>

                                    <!--<div class="form-group">
                                        <label for="type" class="col-sm-2 control-label">类型</label>
                                        <div class="col-sm-2">
                                            <select id="type" name="category" class="select selectpicker">
                                                <option value="1" th:selected="${service.category == 1}">流行</option>
                                                <option value="2" th:selected="${service.category == 2}">引领</option>
                                                <option value="3" th:selected="${service.category == 2}">时尚</option>
                                            </select>
                                        </div>
                                    </div>-->

                                    <div class="form-group">
                                        <label for="container" class="col-sm-2 control-label">描述</label>
                                        <div class="col-sm-8">
                                            <script id="container" name="container" type="text/plain"></script>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-3">
                                            <button type="button" class="btn btn-info" id="btn-submit">
                                                <span class="fa fa-adjust"> 提交</span>
                                            </button>
                                            <button type="button" class="btn btn-info" onclick="document.location.replace(ctx + '/slService/manager');">
                                                <span class="glyphicon glyphicon-backward"> 返回</span>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<textarea id="test" th:text="${service}?${service.descrption}" style="display: none;">

</textarea>
</body>

<th:block th:include="commons/js::js">Javascript Libs</th:block>
<script type="text/javascript" th:src="@{/public/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" th:src="@{/public/ueditor/ueditor.all.min.js}"></script>
<script type="text/javascript" th:src="@{/public/ueditor/ueditorinit.js}"></script>
<script type="text/javascript" th:src="@{/public/My97DatePicker/WdatePicker.js}"></script>

<script type="text/javascript">
    $(function () {

        ue.addListener("ready", function () {
            ue.setContent("");
            ue.setContent($("#test").val());
        });

        $('#actionForm').validate({
           /* rules: {
                activityStartTime: "required",
                activityEndTime: {
                    required: true,
                    compareDate:"#activityStartTime"
                }
            },
            messages: {
                activityEndTime: {
                    compareDate: "开始时间必须小于结束时间"
                }
            }*/
        });

        $("#btn-submit").click(function () {
            if (!ue.hasContents()) {
                Alert("请填入描述信息");
                return;
            }
            var imgUrlFile = $("#imgUrlFile")[0].files.length;
            var imgUrl = $("#imgUrl").val();
            if (imgUrlFile < 1 && $.trim(imgUrl).length < 1) {
                Alert("请选择文件");
                return;
            }
            // 提交表单
            var actionForm = $("#actionForm");
            var valid = actionForm.valid();
            if (!valid) {
                return;
            }
            var descrptionText = ue.getContentTxt();
            if (descrptionText && $.trim(descrptionText).length > 0) {
                descrptionText = descrptionText.substring(0, 20) + "...";
            }
            actionForm.ajaxSubmit({
                type: "post",
                url: ctx + "/slService/saveSlService",
                data: {
                    descrption: ue.getContent(),
                    descrptionText: descrptionText
                },
                success: function (rtn) {
                    if(rtn.code != 1) {
                        Alert(rtn.message);
                        return;
                    }
                    Alert("操作成功", function () {
                        document.location.replace(ctx + "/slService/manager");
                    });
                }
            });
        });

        $("#imgUrlFile").change(function (e) {
            if (window.FileReader) {
                var reader = new FileReader();
            } else {
                Alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
            }
            //获取文件
            var fileDom = e.target;
            var file = fileDom.files[0];
            var imageType = /^image\//;
            //是否是图片
            if (!imageType.test(file.type)) {
                Alert("请选择图片！");
                return;
            }
            //读取完成
            reader.onload = function (e) {
                //获取图片dom
                var img = document.getElementById("preview");
                //图片路径设置为读取的图片
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        });
    });
</script>
</html>